<template>
  <div>
    <el-card class="box-1">
      <div slot="header"><span>添加订单退款</span></div>
      <el-form ref="form" :model="form" :rules="formRules" label-width="160px">
        <el-form-item label="退款订单编号">
          <el-input v-model="form.orderSn" style="width: 360px;"/>
          <el-button type="success" class="do-btn" icon="el-icon-search" @click="getOrderData">搜索</el-button>
        </el-form-item>
        <el-form-item label="原订单信息">
          <el-card shadow="none" style="min-height: 200px">
            <slot v-if="form.orderInfo.goods_name">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="订单号：">{{ form.orderInfo.number_sn }}</el-form-item>
                  <el-form-item label="客户名：">{{ form.orderInfo.member_name }}</el-form-item>
                  <el-form-item label="客户手机：">{{ form.orderInfo.member_phone }}</el-form-item>
                  <el-form-item label="购买时间：">{{ form.orderInfo.buy_time }}</el-form-item>
                  <el-form-item label="已服务(总时长)：">{{ form.orderInfo.serverTime }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品名：">{{ form.orderInfo.goods_name }}</el-form-item>
                  <el-form-item label="销售金额：">{{ form.orderInfo.goods_money }}</el-form-item>
                  <el-form-item label="销售提成：">{{ form.orderInfo.order_bonus }}</el-form-item>
                  <el-form-item label="预期奖金：">{{ form.orderInfo.bonus_money }}</el-form-item>
                </el-col>
              </el-row>
            </slot>
          </el-card>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="form.customer_name"/>
        </el-form-item>
        <el-form-item label="客户手机">
          <el-input v-model="form.customer_mobile"/>
        </el-form-item>
        <el-form-item label="微购儿账号">
          <el-input v-model="form.we_account"/>
        </el-form-item>
        <el-form-item label="退款说明">
          <el-input v-model="form.description" type="textarea" rows="4"/>
        </el-form-item>
        <el-form-item label="图片上传">
          <div class="remark">上传补充图片</div>
          <ws-upload-multiple-img v-model="form['pic_id']" :path="form['pic_id_url']" :limit="3"/>
        </el-form-item>
        <el-divider/>
        <el-form-item label="退款金额">
          <el-input v-model="form.refund_money"/>
        </el-form-item>
        <el-form-item label="付款地址">
          <el-radio-group v-model="form.pay_mode">
            <el-radio :label="1">微信</el-radio>
            <el-radio :label="2">支付宝</el-radio>
            <el-radio :label="3">银行卡</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="账户姓名">
          <el-input v-model="form.payer_name"/>
        </el-form-item>
        <el-form-item label="付款账号">
          <el-input v-model="form.payer_account"/>
        </el-form-item>
        <div style="text-align:center">
          <el-button :disabled="loading" :loading="loading" type="primary" @click="submitForm('form')">提交</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        usersList: [], // 系统用户列表
        form: {
          orderSn: '',
          orderInfo: {},
          customer_name: '',
          customer_mobile: '',
          pic_id: '',
          pic_id_url: []
        },
        formRules: {
        }
      }
    },
    watch: {},
    created() {
      this.id = this.$route.query.id;
    },
    methods: {
      getOrderData() {
        const url = 'achievement/getDetailBySn';
        const data = {
          orderSn: this.form.orderSn
        }
        this.$store.dispatch('GetConnect', {url, data}).then(res => {
          this.form.orderInfo = res.data;
          this.form.customer_name = res.data.member_name;
          this.form.customer_mobile = res.data.member_phone;
        }).catch(e => {
          this.$message.error(e.msg)
        })
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const data = this.form
            const url = 'achievementRefund/toAdd'
            this.loading = true
            this.$store.dispatch('GetConnect', {url, data}).then(res => {
              this.$message.success(res.msg)
              this.$router.back(-1)
            }).catch((err) => {
              this.loading = false
              this.$message.error(err.msg)
            })
          } else {
            this.$message.error('提交失败,请检查必填项')
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';

  .box-1 {
    max-width: 1000px;
    margin: 0 auto;

    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }

    .el-form {
      max-width: 900px;

      .title {
        font-weight: 600;
      }

      .remark {
        font-size: 13px;
        color: $textGray;
      }

      .el-button {
        @extend .bg-green;
        width: 20%;
        min-width: 160px;
      }
    }
  }

  .el-checkbox {
    margin-right: 30px;
  }

  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }
</style>
